<template>
  <view>
    <view class="picker-modal" v-if="show"></view>
    <view class="picker-content" :style="{ transform: show ? 'translateY(0)' : 'translateY(100%)' }">
      <view class="picker-header">
        <view @click="onClose">确定</view>
        <view class="packer-title">检修内容</view>
        <view @click="selectAllHandle">{{ !selectAllStatus ? '全选' : '取消全选' }}</view>
      </view>
      <view class="picker-header">
        <view></view>
        <view class="packer-title">{{ title }}</view>
        <view></view>
      </view>
      <scroll-view scroll-y="true" style="height: calc(100vh - 134px); margin-bottom: 10px; margin-top: 10px">
        <view class="common" v-for="(item, index) in listData" @click="handleItemClick(item, index)" :key="item.itemId">
          <label class="info-content">
            <view class="uni-inline-item">
              <view>
                <image
                  v-if="isItemSelect(item)"
                  class="select-icon"
                  src="/static/images/work/dbd/selected_yes.png"
                  mode="aspectFit"
                ></image>
                <image
                  v-else
                  class="select-icon"
                  src="/static/images/work/dbd/selected_no.png"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="flex-center">
                <view class="dept-name">检修内容： {{ item.content }}</view>
                <view class="dept-name">检修周期标准：{{ item.periodStandard }}</view>
              </view>
            </view>
          </label>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getStandardItemList } from '@/api/repair/repair.js'
export default {
  name: 'StandardItemSelector',
  props: {
    //标题文字
    title: {
      type: String,
      default: ''
    },
    // 数据
    selectData: {
      type: Array
    },
    deviceId: {
      type: Number
    },
    overhaulCategory: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listData: [],
      show: false,
      value: [0],
      current: undefined,
      activeLevel: undefined
    }
  },
  computed: {
    isItemSelect() {
      return (item) => {
        const data = this.selectData
        if (data.length === 0) {
          return false
        }
        const i =
          data.findIndex((e) => {
            return item.itemId === e.itemId
          }) > -1
        return i
      }
    },
    selectAllStatus() {
      let total = 0
      this.listData.map((i) => {
        if (this.selectData.some((j) => j.itemId == i.itemId)) {
          total++
        }
      })
      return this.listData.length === total && total > 0
    }
  },
  methods: {
    // 打开
    open(title, type) {
      this.show = true
      this.getData()
    },
    getData() {
      getStandardItemList({
        pageNum: 1,
        pageSize: 10000,
        overhaulCategory: this.overhaulCategory,
        deviceId: this.deviceId
      }).then((res) => {
        this.listData = res.rows
      })
    },
    //确定
    onConfirm() {
      this.show = false
      // const selectData = {
      // 	value: this.data[this.activeLevel].code,
      // 	name: this.data[this.activeLevel].description
      // }
      this.$emit('confirm', this.selectData)
    },
    // 取消
    onClose() {
      this.show = false
    },
    //滑动picker
    onChange(e) {
      this.value = e.detail.value
    },
    radioChange(e) {
      console.log(e)
    },

    handleItemClick(item, index) {
      this.itemMultipleClick(item, index)
    },
    itemMultipleClick(item, index) {
      let findIdex = this.selectData.findIndex((e) => item.itemId === e.itemId)
      if (findIdex > -1) {
        this.selectData.splice(findIdex, 1)
      } else {
        this.selectData.push(item)
      }
    },
    selectAllHandle() {
      if (this.selectAllStatus) {
        // 反选
        this.$emit('selectAll', [])
      } else {
        // 全选
        this.$emit('selectAll', [...this.listData])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  transition: all 0.3s;
}

.picker-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}

.packer-title {
  text-align: center;
}

.picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 490rpx;
  background-color: rgba(255, 255, 255, 1);
}

.picker-item {
  text-align: center;
  line-height: 70rpx;
  text-overflow: ellipsis;
}

.level-list {
  .level-item {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    color: #333;
    line-height: 42rpx;
    padding: 20rpx;

    .icon-style {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    .content {
      flex: 1;
    }
  }
}

.flex_between_center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkbox {
  position: relative;
  margin-left: 10rpx;
  margin-right: 0px;

  .color {
    color: #00aaff;
    background-color: #00aaff;
  }

  .txt {
    font-size: 44rpx;
    width: 100%;
    height: 100%;
    display: flex;
  }
}

.checkBorder {
  border: 1px solid #ecdee4;
}

.header {
  width: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 9999;

  .title {
    height: 90rpx;
    padding: 0 32rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #666666;
    font-weight: 500;
  }
}

.iconclass {
  display: inline-block;
  margin: 0 12rpx;
  color: #d0d4db;
  font-size: 28rpx;
}

.common {
  background-color: #fff;
  border-bottom: 1rpx solid #f4f4f4;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color: #d0d4db;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;

  .content {
    display: flex;
    align-items: center;
    height: 60rpx;
    width: 100%;
    padding: 15rpx 0;
    position: relative;
    font-size: 32rpx;

    .lable-text {
      margin-left: 16rpx;
      font-size: 30rpx;
      color: #5b5757;
      width: 500rpx;
      word-break: break-all;
    }

    .right {
      position: absolute;
      right: 30rpx;
      color: #babdc3;
      font-size: 32rpx;
    }
  }
}

.active {
  color: #4297ed !important;
}

.none {
  color: #666666;
}

.icon-selected {
  color: #0095f2 !important;
  font-size: 40rpx !important;
}

.icons {
  color: #0095f2 !important;
  font-size: 40rpx !important;
}

.inline-item {
  display: inline-block;
}

.content-item {
  display: flex;
  position: relative;
  align-items: center;
}

.box_sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn {
  position: fixed;
  bottom: 0;
  padding: 10px;
  background-color: #fff;
  opacity: 0.9;
  width: 100%;

  .bottom-btn-wrap {
    display: flex;
    align-items: center;

    .selected-text {
      flex: 1;
      font-size: 24rpx;
      color: #333333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .arrow-up {
      padding-left: 20rpx;
    }

    .confirm-btn {
      font-size: 32rpx;
      margin-left: 20rpx;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #2ac0c8;
      color: #fff;
      border-radius: 0;
      min-width: 200rpx;
      &:after {
        display: none;
      }
    }
  }
}

.select-all-wrap {
  display: flex;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  padding: 30rpx;
}

.select-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}

.info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx 24rpx 30rpx;

  .dept-icon-wrap {
    background: #f4f5f9;
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;

    .dept-icon {
      width: 44rpx;
      height: 36rpx;
    }
  }

  .user-icon-wrap {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
    border-radius: 50%;
    overflow: hidden;

    .user-icon {
      width: 100%;
      height: 100%;
    }
  }

  .dept-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }

  .standard {
    margin-left: 10px;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }

  .user-num {
    font-size: 32rpx;
    font-weight: 500;
    color: #999999;
  }
}

::v-deep {
  .uni-inline-item uni-text:last-child {
    margin: 0;
  }
}

.user-scroll-wrap {
  height: calc(100vh - 120rpx);
}

.selected-inof-popup-wrap {
  .popup-header {
    justify-content: space-between;
    padding-left: 30rpx;

    .selected-text {
      font-size: 28rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .close-popup-btn {
      width: 140rpx;
      line-height: 80rpx;
      text-align: center;
      color: #4297ed;
    }
  }

  .user-scroll-wrap {
    height: 60vh;
  }

  .common {
    background-color: #fff;
    border-bottom: 1rpx solid #f4f4f4;
  }
}
</style>
